<template>
  <div class="page-subpackage">
    <div class="bg-white p-3 rounded-sm">
      <el-input v-model="search" placeholder="请输入人员名称" clearable @input="searchKeyperson">
        <template #prepend>
          <el-button type="primary" size="default" @click="openConfigWin">
            <Setting theme="outline" size="15" fill="#333" />
          </el-button>
        </template>
        <template #append>
          <el-button type="primary" size="default" @click="openFile">
            <TableFile theme="outline" size="15" fill="#333" />
          </el-button>
        </template>
      </el-input>
    </div>
    <div class="overflow-y-auto max-h-[425px] bg-white rounded-sm px-3 py-2 -my-1">
      <div v-if="!tableValue.length" class="text-xs flex justify-center text-gray-600">
        <Cattle theme="outline" size="16" fill="#555" class="mr-2" />
        项目管理
      </div>
      <div v-for="value in tableValue" :key="value.id" class="sub-item">
        <div class="left">
          <div class="scon" :class="{ laowu: value.gongxu.includes('劳务') }">
            <wind-turbine
              theme="outline"
              size="16"
              fill="#333"
              v-if="value.gongxu.includes('专业')"
            />
            <Spanner theme="outline" size="16" fill="#333" v-if="value.gongxu.includes('劳务')" />
          </div>
          <div>
            <div class="name">
              {{ value.name }}
              <div
                class="bg-red-400 text-white py-0.5 px-1.5 text-xs mr-2 rounded"
                v-if="value.remark"
              >
                {{ value.remark }}
              </div>
            </div>
            <div class="comp">{{ value.compName }}</div>
          </div>
        </div>
        <div class="right">
          <div class="gongxu">{{ value.gongxu }}</div>
          <div class="zhiwu">{{ value.zhiwu }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Cattle, Setting, Spanner, TableFile, WindTurbine } from '@icon-park/vue-next'
import useComp from '@renderer/composables/useComp'
import useSubpackage from '@renderer/composables/useSubpackage'
import { ref } from 'vue'

const { all: allSubpackage, subpackages } = useSubpackage()
const { find: findComp, comp } = useComp()
const search = ref('')
const tableValue = ref<KeyPersonModel[]>([])

const openFile = () => {
  window.api.open()
}
const openConfigWin = () => {
  window.api.openConfigWin()
}

const searchKeyperson = async () => {
  const lst_subpackage = subpackages.value.filter((sub) => sub.name.includes(search.value))
  if (search.value) {
    tableValue.value = lst_subpackage
    for await (const v of tableValue.value) {
      await findComp(v.compId)
      v.compName = comp.value!.name
    }
  } else {
    tableValue.value = []
  }
}

allSubpackage()
</script>

<style lang="scss" scoped>
.page-subpackage {
  @apply h-screen px-2 py-5;
  // display: grid;
  // grid-template-rows: auto 1fr;
  .sub-item {
    @apply my-2 bg-[#2F4F4F] flex justify-between items-center p-2 rounded-sm;
    .left {
      @apply text-gray-300 flex gap-4 items-center;
      .scon {
        @apply m-1 bg-[#1D8A99] rounded p-2;
        &.laowu {
          @apply bg-[#E06D10];
        }
      }
      .name {
        @apply flex items-center gap-3;
      }
      .comp {
        @apply text-xs opacity-90;
      }
    }
    .right {
      @apply text-gray-200 flex flex-col items-end;
      .gongxu {
      }
      .zhiwu {
        @apply text-xs opacity-90;
      }
    }
  }
}
</style>
